import { memo } from 'react'
import useGetComponentInfo from '@/hooks/useGetComponentInfo'
import { ComponentInfoType, changeComponentProps } from '@/store/modules/componentsReducer'
import {
  getComponentConfByType,
  ComponentConfType,
  ComponentPropsType,
} from '@/components/QuestionComponents'
import { useDispatch } from 'react-redux'

const ComponentProp = memo(() => {
  const dispatch = useDispatch()

  const { selectedComponent } = useGetComponentInfo()
  if (selectedComponent == null) return <></>
  else {
    const { fe_id, type, props, isLocked } = selectedComponent as ComponentInfoType
    const componentConf = getComponentConfByType(type) as ComponentConfType
    const PropComponent = componentConf.propComponent

    const changeProps = (newProps: ComponentPropsType) => {
      dispatch(changeComponentProps({ id: fe_id, newProps }))
    }

    return <PropComponent {...props} onChange={changeProps} disabled={isLocked} />
  }
})

export default ComponentProp
